import { useNavigate } from "react-router-dom";
export default function Z1() {
  const navigate = useNavigate();
  return (
    <div
          style={{
            backgroundColor: "#fef8f3",
            borderRadius: "10px",
            width: "90%",
            height: "300px",
            margin: "0 auto",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <div
            style={{
              width: "80%",
              height: "80%",
              backgroundColor: "#fff",
              borderRadius: "10px",
              display: "flex",
              flexWrap: "wrap",
            }}
          >
            <div style={{ width: "23%", height: "45%" }}>
              <div style={{ width: "60%", height: "60%", margin: "0 auto" }}>
                <img
                  style={{ width: "100%", height: "auto" }}
                  onClick={() =>navigate("/mai")}
                  src="https://fe-img.tengzhihh.com/image/d00b72a0b65ef31149c1f69f21e98c8a-152x152.png?x-oss-process=image/format,webp"
                />
              </div>
              <div>
                <p style={{ textAlign: "center", fontSize: "14px", color: "#333333" }}>
                  2025麦玲玲蛇年运势
                </p>
              </div>
            </div>
            <div style={{ width: "23%", height: "45%" }}>
              <div style={{ width: "60%", height: "60%", margin: "0 auto" }}>
                <img
                  style={{ width: "100%", height: "auto" }}
                  onClick={() =>navigate("/snake")}
                  src="https://fe-img.tengzhihh.com/image/51574d9e149161eb71a1201faad848ba-152x152.png?x-oss-process=image/format,webp"
                />
              </div>
              <div>
                <p style={{ textAlign: "center", fontSize: "14px", color: "#333333" }}>
                  2025紫薇蛇年运势
                </p>
              </div>
            </div>
            <div style={{ width: "23%", height: "45%" }}>
              <div style={{ width: "60%", height: "60%", margin: "0 auto" }}>
                <img
                  style={{ width: "100%", height: "auto" }}
                  src="https://img-fe.tengzhihh.com/image/064809cedebc74-152x152.png?x-oss-process=image/format,webp"
                />
              </div>
              <div>
                <p style={{ textAlign: "center", fontSize: "14px", color: "#333333" }}>
                  一生八字详批
                </p>
              </div>
            </div>
            <div style={{ width: "23%", height: "45%" }}>
              <div style={{ width: "60%", height: "60%", margin: "0 auto" }}>
                <img
                  style={{ width: "100%", height: "auto" }}
                  src="https://img-fe.tengzhihh.com/image/26ca9088c963c1-152x152.jpg?x-oss-process=image/format,webp"
                />
              </div>
              <div>
                <p style={{ textAlign: "center", fontSize: "14px", color: "#333333" }}>
                  八字精批
                </p>
              </div>
            </div>
            <div style={{ width: "23%", height: "45%" }}>
              <div style={{ width: "60%", height: "60%", margin: "0 auto" }}>
                <img 
                  style={{ width: "100%", height: "100%", borderRadius:'15px'}}
                  src="../img/ljwyao1.png"
                  onClick={() =>navigate("/liuyao")}
                />
              </div>
              <div>
                <p style={{ textAlign: "center", fontSize: "14px", color: "#333333" }}>
                  六爻测运
                </p>
              </div>
            </div>
            <div style={{ width: "23%", height: "45%" }}>
              <div style={{ width: "60%", height: "60%", margin: "0 auto"  }}>
                <img
                  style={{ width: "100%", height: "auto", borderRadius:'15px' }}
                  src="../img/zytb.png"
                  onClick={() =>navigate("/ljwzs")}
                />
              </div>
              <div>
                <p style={{ textAlign: "center", fontSize: "14px", color: "#333333" }}>
                  周易神算
                </p>
              </div>
            </div>
            <div style={{ width: "23%", height: "45%" }}>
              <div style={{ width: "60%", height: "60%", margin: "0 auto" }}>
                <img
                  style={{ width: "100%", height: "auto" }}
                  onClick={() =>navigate("/Index")}
                  src="https://img-fe.tengzhihh.com/image/362470417cce09-152x152.png?x-oss-process=image/format,webp"
                />
              </div>
              <div>
                <p style={{ textAlign: "center", fontSize: "14px", color: "#333333" }}>
                  麦玲玲合婚
                </p>
              </div>
            </div>
            <div style={{ width: "23%", height: "45%" }}>
              <div style={{ width: "60%", height: "60%", margin: "0 auto" }}>
                <img
                  style={{ width: "100%", height: "auto" }}
                  onClick={() =>navigate("/Message")}
                  src="https://img-fe.tengzhihh.com/image/40997a94d800ab-152x152.png?x-oss-process=image/format,webp"
                />
              </div>
              <div>
                <p style={{ textAlign: "center", fontSize: "14px", color: "#333333" }}>
                  八字一生姻缘
                </p>
              </div>
            </div>
          </div>
    </div>
  );
}